﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MenuList</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <div class="layui-container">


        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
                <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
                <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
                <button class="layui-btn layui-btn-sm" lay-event="expand">全部展开</button>
                <button class="layui-btn layui-btn-sm" lay-event="fold">全部折叠</button>
            </div>
        </script>
        <table id="table1" class="layui-table" lay-filter="table1"></table>
    </div>


    <form class="layui-form" action="" id="pro" lay-filter="proForm" style="display:none;height:330px;">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="radio" lay-filter="rad" name="red" value="1" title="一级分类">
                <input type="radio" lay-filter="rad" name="red" value="2" title="二级分类">
            </div>
        </div>
        <div class="layui-form-item" id="proBig" style="display:none;">
            <label class="layui-form-label">分类：</label>
            <div class="layui-input-inline" style="width:166px;">
                <select lay-filter="proBig" name="proBig" id="xBig"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称：</label>
            <div class="layui-input-inline" style="width:166px;">
                <input type="text" Id="proName" name="proName" maxlength="8" placeholder="请输入名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" id="proURLshow">
            <label class="layui-form-label">URL：</label>
            <div class="layui-input-inline" style="width:166px;">
                <input type="text" Id="proURL" name="proURL" maxlength="50" placeholder="请输入链接" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序：</label>
            <div class="layui-input-inline" style="width:166px;">
                <input type="text" Id="proSort" name="proSort" maxlength="8" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数字" class="layui-input">
            </div>
        </div>
    </form>


    <script src="~/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="~/layui/layui.js"></script>
    <script>
        var pickData = null;
        var tableData = null;
        var proBig = 0;
        var proRad = 1;
        var id = 0;

        $.get("/Menu/GetMenu", function (res) {
            tableData = res.data;
            var an = tableData.filter((item) => {
                return item.parentId == 0;
            });
            var select = JSON.parse(JSON.stringify(an));
            console.log(select);
            var selectStr = ('<option value="' + 0 + '">' + '请选择' + '</option>');
            for (var i = 0; i < select.length; i++) {
                var node = ('<option value="' + select[i].id + '">' + select[i].name + '</option>');
                selectStr += node;
            }
            $("#proBig select").html(selectStr);
            $("input[name='red'][title='一级分类']").attr('checked', true).click();
        });


        layui.config({
            base: '/layui/module/'
        }).extend({
            treetable: 'treetable-lay/treetable'
        }).use(['treetable'], function () {
            var treetable = layui.treetable;
            form = layui.form;

            form.render('select'); //刷新select选择框渲染
            // 渲染表格https://gitee.com/whvse/treetable-lay/wikis/pages?sort_id=1986057&doc_id=142114
            treetable.render({
                treeColIndex: 2,          // 树形图标显示在第几列
                treeSpid: "0",             // 最上级的父级id
                treeIdName: 'id',       // id字段的名称
                treePidName: 'parentId',     //pid字段的名称
                treeDefaultClose: true,   // 是否默认折叠
                treeLinkage: false,        // 父级展开时是否自动展开所有子级
                elem: '#table1',
                url: "/Menu/GetMenu"
                , toolbar: '#toolbarDemo'
                , id: 'idTree'//便于重载表格
                , cols: [[
                    { type: 'space', hide: true },
                    { field: 'id', title: 'id' },
                    { field: 'name', title: 'name' },
                    { field: 'url', title: 'url' },
                    { field: 'sort', title: 'sort' },
                ]]
            });

            layui.table.on('rowDouble(table1)', function (obj) {
                //obj 同上
                console.log(obj);
            });

            layui.table.on('row(table1)', function (obj) {
                //console.log(obj.tr) //得到当前行元素对象
                console.log(obj.data) //得到当前行数据
                $(".layui-table-body tr").each(function (ii, vv) {
                    //ii 指第几个元素的序列号。
                    //vv 指遍历得到的元素。
                    $(this).css("background-color", "#fff");
                });
                $(obj.tr).css("background-color", "#f2f2f2");
                pickData = obj.data;
                id = obj.data.id;
            });

            //监听事件
            layui.table.on('toolbar(table1)', function (obj) {
                form.render('radio');
                layui.form.render('select'); //刷新select选择框渲染
                $('#proName').val("");
                $('#proSort').val("0");
                $('#proURL').val("");
                switch (obj.event) {
                    case 'add':
                        layer.msg('添加');
                        layer.prompt({
                            title: obj.event,
                            anim: 1,
                            content: $("#pro"),
                            yes: function (index, layero) {
                                if (proRad == 0 || proRad > 2) {
                                    layer.msg('请选择分类！', { time: 1000 }); return;
                                }
                                if ($('#proName').val() == '') {
                                    layer.msg('分类名称不能为空！', { time: 1000 }); return;
                                }
                                $.ajax({
                                    url: "/Menu/MenuAddOrUpdate",
                                    data: { 'rad': proRad, 'id': 0, 'menuName': $('#proName').val(), 'big': proBig, 'actionType': obj.event, 'sort': $('#proSort').val(), 'url': $('#proURL').val()},
                                    type: "get",
                                    success: function (res) {
                                        layer.msg(res.msg == null ? "错误" : res.msg, { time: 1000 });
                                        if (res.success) {
                                            window.location.reload();
                                            layer.close(index);//如果设定了yes回调，需进行手工关闭
                                        }
                                    }
                                });
                            }, end: function (index, layero) {
                                $("#proBig").hide();
                            }
                        });
                        break;
                    case 'delete':
                        layer.msg('删除');
                        if (pickData == undefined || pickData.length == 0 || id == 0) {
                            layer.msg('请选择要删除的信息！', { time: 1000 }); return;
                        }
                        layer.confirm("您确定要删除该条信息吗？", { btn: ['确定', '取消'], title: "提示" }, function (index) {
                            if (JSON.parse(JSON.stringify(tableData.filter((item) => { return item.parentId == id }))).length > 0) {
                                layer.msg('该信息，还有子级！', { time: 1000 }); layer.close(index); return;
                            }
                            $.get("/Menu/MenuDelete", { "id": id }, function (res) {
                                if (res.success) {
                                    window.location.reload();
                                    layer.close(index);//如果设定了yes回调，需进行手工关闭
                                }
                            });
                        });
                        break;
                    case 'update':
                        layer.msg('编辑');
                        if (pickData == undefined || pickData.length == 0 || id == 0) {
                            layer.msg('请选择要编辑的信息！', { time: 1000 }); return;
                        }
                        if (pickData.parentId == 0) {
                            $("input[name='red'][title='一级分类']").attr('checked', true).click();
                            proRad = 1; $("#proBig").hide(); $("#proURLshow").hide();
                        }
                        else {
                            $("input[name='red'][title='二级分类']").attr('checked', true).click();
                            proRad = 2;
                            $("#proBig").show(); $("#proURLshow").show();
                            var one = JSON.parse(JSON.stringify(tableData.filter((item) => { return item.id == pickData.parentId; })))[0];
                            $('#xBig').siblings("div.layui-form-select").find('dl').find('dd[lay-value=' + one.id + ']').click();
                        }
                        $('#proName').val(pickData.name);
                        $('#proSort').val(pickData.sort);
                        $('#proURL').val(pickData.url);
                        form.render('radio');  // 设置某个单选为true时，需要刷新下单选
                        layer.prompt({
                            title: obj.event,
                            anim: 1,
                            content: $("#pro"),
                            yes: function (index, layero) {
                                if (proRad == 0 || proRad > 2) {
                                    layer.msg('请选择分类！', { time: 1000 }); return;
                                }
                                if ($('#proName').val() == '') {
                                    layer.msg('分类名称不能为空！', { time: 1000 }); return;
                                }
                                $.ajax({
                                    url: "/Menu/MenuAddOrUpdate",
                                    data: { 'rad': proRad, 'id': 0, 'menuName': $('#proName').val(), 'big': proBig, 'actionType': obj.event, 'sort': $('#proSort').val(), 'url': $('#proURL').val() },
                                    type: "get",
                                    success: function (res) {
                                        layer.msg(res.msg == null ? "错误" : res.msg, { time: 1000 });
                                        if (res.success) {
                                            window.location.reload();
                                            layer.close(index);//如果设定了yes回调，需进行手工关闭
                                        }
                                    }
                                });
                            }, end: function (index, layero) {
                                $("#proBig").hide();
                            }
                        });
                        break;
                    case 'expand':
                        treetable.expandAll('#table1');
                        break;
                    case 'fold':
                        treetable.foldAll('#table1');
                        break;
                };
            });


            //单选按钮
            layui.form.on('radio(rad)', function (data) {
                console.log(data.value + '级分类'); //被点击的radio的value值
                proRad = data.value;
                if (data.value == 1) {
                    $("#proBig").hide();
                    $("#proURLshow").hide();
                } else {
                    $("#proBig").show();
                    $("#proURLshow").shwo();
                }
            });
            //下拉框
            layui.form.on('select(proBig)', function (data) {
                proBig = data.value;
            });

        });
    </script>
    <script>
                //$("table td").dbclick(function () {
                //    var td = $(this);
                //    // 根据表格文本创建文本框 并加入表表中--文本框的样式自己调整
                //    var text = td.text();
                //    var txt = $("<input type='text'>").val(text);
                //    txt.blur(function () {
                //        // 失去焦点，保存值。于服务器交互自己再写,最好ajax
                //        var newText = $(this).val();

                //        // 移除文本框,显示新值
                //        $(this).remove();
                //        td.text(newText);
                //    });
                //    td.text("");
                //    td.append(txt);
                //});
    </script>









</body>
</html>
